<template>
  <div class="userlist-container">
    <!-- 添加用户 -->
    <div class="add">
      <el-button type="primary" @click="dialogFormVisible = true"
        >添加用户</el-button
      >
    </div>
    <!-- 表界面 -->
    <el-table
      :data="
        tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)
      "
      style="width: 100%"
    >
      <el-table-column label="#" type="index"> </el-table-column>
      <el-table-column label="用户名" prop="name" width="150px">
      </el-table-column>
      <el-table-column label="密码" prop="pass" width="400px">
      </el-table-column>
      <!-- <el-table-column label="状态" prop="status"> -->
      <!-- <template slot-scope="scope">
          <el-tooltip
            :content="'Switch value: ' + scope.row.status"
            placement="top"
          >
            <el-switch
              v-model="scope.row.status"
              active-color="#409EFF"
              inactive-color="#e6e6e6"
              active-value="1"
              inactive-value="0"
              @change="status(scope.row)"
            >
            </el-switch>
          </el-tooltip>
        </template> -->
      <!-- </el-table-column> -->
      <el-table-column align="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="
              dialogForm2Visible = true
              handleEdit(scope.$index, scope.row)
            "
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[3, 6, 10, 15]"
        :page-size="this.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.len.num"
      >
      </el-pagination>
    </div>
    <!-- 点击显示界面 -->
    <div class="dialog">
      <!-- 添加 -->
      <el-dialog title="添加用户" :visible.sync="dialogFormVisible" width="25%">
        <el-form :model="form">
          <el-form-item label="用户名" :label-width="formLabelWidth">
            <el-input v-model="form.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input v-model="form.pass" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="
              dialogFormVisible = false
              post()
            "
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
    <div class="edituser">
      <!-- 编辑 -->
      <el-dialog title="修改" :visible.sync="dialogForm2Visible" width="25%">
        <el-form :model="form2">
          <el-form-item label="用户名" :label-width="form2LabelWidth">
            <el-input v-model="form2.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" :label-width="form2LabelWidth">
            <el-input v-model="form2.pass" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogForm2Visible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="
              dialogForm2Visible = false
              edituser()
            "
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// import axios from 'axios'
// import Page from '../components/Page'

export default {
  data() {
    return {
      tableData: [],
      id: '',
      search: '',
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogForm2Visible: false,
      form: {
        username: '',
        pass: ''
      },
      form2: {
        username: '',
        pass: '',
        id: '',
        status: 0
      },
      formLabelWidth: '60px',
      form2LabelWidth: '60px',
      len: {
        num: 0
      },
      currentPage: 1,
      pagesize: 6
    }
  },

  created() {
    this.get()
  },
  methods: {
    // 编辑
    async edituser() {
      await this.$http
        .put('/edituser/' + this.form2.id, {
          name: this.form2.username,
          pass: this.form2.pass,
          status: this.form2.status
        })
        .then(() => {
          this.get()
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    handleEdit(index, row) {
      this.form2.id = row._id
      this.form2.username = row.name
      this.form2.pass = row.pass
    },
    // 删除
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$http.delete('/deluser/' + row._id)
          this.tableData.splice(index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 获取
    async get() {
      const { data: res } = await this.$http({
        method: 'GET',
        url: 'http://127.0.0.1:3000/'
      })
      this.tableData = res
      this.len.num = res.length
    },
    // 添加
    async post() {
      const { data: res } = await this.$http({
        method: 'POST',
        url: '/adduser',
        data: {
          name: this.form.username,
          pass: this.form.pass,
          tel: this.form.pass
        }
      }).then(() => {
        this.get()
        this.$message({
          type: 'success',
          message: '添加成功!'
        })
      })
      this.tableData.push(res)
    },
    // 页码
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pagesize = val
      this.get()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
      this.get()
    }
    // 状态
    // status(scope) {
    //   this.form2.status = scope
    //   // this.edituser()
    //   console.log(scope.row)
    // }
  }
}
</script>
<style lang="less" scoped>
.userlist-container {
  min-width: 700px;
  margin: 10px 10px;
  padding: 5px 5px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.block {
  height: 30px;
  margin-left: 250px;
}
</style>
